<template>
  <div class="out">
    <a-float-button-group
      trigger="hover"
      type="primary"
      :style="{ right: '24px' }"
    >
      <template #icon>
        <SettingOutlined />
      </template>
      <!--      <a-float-button />-->
      <a-float-button @click="global.affixSearch.value = !global.affixSearch.value" tooltip="固定搜索框">
        <template #icon>
          <VerticalAlignTopOutlined :style="global.affixSearch.value?{color:global.themeColor}:{}"/>
        </template>
      </a-float-button>
      <a-float-button @click="global.showParticles.value = !global.showParticles.value" tooltip="粒子特效">
        <template #icon>
          <SlidersOutlined :style="global.showParticles.value?{color:global.themeColor}:{}" />
        </template>
      </a-float-button>
    </a-float-button-group>
    <Particles v-show="global.showParticles.value"></Particles>


    <div id="app">
      <router-view />
      <a-back-top />
    </div>

  </div>
</template>
<style scoped lang="less">
.out {
  min-height: 100vh;
  background-color: #f0f2f5;
}

#app {
  padding: 10px;
  margin: 0 auto;
  max-width: 70%;
  height: 100%;
}

.button {
  position: fixed;
  right: 50px;
  bottom: 50px;
}
</style>

<script setup lang="ts">
import Particles from "@/components/VFX/Particles.vue";
import { onBeforeMount, ref } from "vue";
import {
  SettingOutlined,
  SlidersFilled,
  SlidersOutlined,
  VerticalAlignTopOutlined,
} from "@ant-design/icons-vue";
import global from '@/types/global';

const toggleStyle = (value:boolean) => {
  return !value
}
onBeforeMount(() => {
  {
    document.title = "聚合搜索";
  }
});
</script>
